<template>
  <div id="User">
    <!--view-->
    <view-box ref="viewBox">
      <div class="top" :style="{backgroundImage:'url('+bgsrc+')'}">
        <x-header :left-options="{showBack: false}" class="header">
          <a slot="left" href="#/MessageCenter"><i class="tp-icon icon-message"></i></a>
          <a slot="right" @click="logout()"><i class="tp-icon icon-set"></i></a>
        </x-header>
        <div class="user">
          <div class="headimg">
            <!-- @click="invite()"-->
            <img :src="'./static/data/user/'+userInfo.imgsrc"/>
            <span class="level">Lv{{userInfo.member_level}}</span>
          </div>
          <div class="info">
            <p class="name">{{userInfo.member_name}}</p>
            <ul>
              <li>
                <router-link to="MyFollow">
                  <p>{{userInfo.fouc_num}}</p>
                  <p class="txt">关注</p>
                </router-link>
              </li>
              <li>
                <router-link to="MyFans">
                  <p>{{userInfo.fans}}</p>
                  <p class="txt">粉丝</p>
                </router-link>
              </li>
              <!--<li>
                                <p>{{userInfo.member_coin}}</p>
                                <p class="txt">文玩币</p>
                            </li>
                            <li>
                                <p>{{userInfo.member_score}}</p>
                                <p class="txt">经验值</p>
                            </li>-->
            </ul>
          </div>
          <a href="#/UserInfo" class="edit vux-1px">修改资料</a>
        </div>
        <div class="signature" v-if="userInfo.member_intro == ''">
          <p>描述一下有趣的自己吧！</p>
        </div>
        <div class="signature" v-else>
          <p>{{userInfo.member_intro}}</p>
        </div>
      </div>
      <div class="order">
        <div class="user-title">
          <h2 class="txt">我的订单</h2>
          <p class="more" @click="gotoOrder(null,demo)">查看全部订单 <i class="icon-right2"></i></p>
        </div>
        <div class="order-list">
          <ul>
            <li @click="gotoOrder(10,demo1)">
              <img slot="icon" src="../../assets/images/home/icon_my_o1.png">
              <span slot="label">待付款</span>
            </li>
            <li @click="gotoOrder(20,demo2)">
              <img slot="icon" src="../../assets/images/home/icon_my_o2.png">
              <span slot="label">待发货</span>
            </li>
            <li @click="gotoOrder(30,demo3)">
              <img slot="icon" src="../../assets/images/home/icon_my_o3.png">
              <span slot="label">已发货</span>
            </li>
            <!--<li @click="gotoOrder(40,demo4)">
                            <img slot="icon" src="../assets/images/home/icon_my_o4.png">
                            <span slot="label">待评价</span>
                        </li>-->
            <router-link to="/ClientService">
              <li>
                <img slot="icon" src="../../assets/images/home/icon_my_o4.png">
                <span slot="label">退款/售后</span>
              </li>
            </router-link>
          </ul>
        </div>
      </div>
      <div class="order">
        <div class="user-title">
          <h2 class="txt">商城订单订单</h2>
          <p class="more" @click="gotoOrder2(null,demo)">查看全部订单 <i class="icon-right2"></i></p>
        </div>
        <div class="order-list">
          <ul>
            <li @click="gotoOrder2(10,demo1)">
              <img slot="icon" src="../../assets/images/home/icon_my_o1.png">
              <span slot="label">待付款</span>
            </li>
            <li @click="gotoOrder2(20,demo2)">
              <img slot="icon" src="../../assets/images/home/icon_my_o2.png">
              <span slot="label">待发货</span>
            </li>
            <li @click="gotoOrder2(30,demo3)">
              <img slot="icon" src="../../assets/images/home/icon_my_o3.png">
              <span slot="label">已发货</span>
            </li>
            <!--<li @click="gotoOrder(40,demo4)">
                            <img slot="icon" src="../assets/images/home/icon_my_o4.png">
                            <span slot="label">待评价</span>
                        </li>-->
            <router-link to="/ClientService">
              <li>
                <img slot="icon" src="../../assets/images/home/icon_my_o4.png">
                <span slot="label">退款/售后</span>
              </li>
            </router-link>
          </ul>
        </div>
      </div>
      <div class="order">
        <div class="user-title">
          <h2 class="txt">买家中心</h2>
          <a href="javascript:;" class="more"><i class="icon-right2"></i></a>
        </div>
        <div class="order-list">
          <ul>
            <router-link to="/MyStrack">
              <li>
                <img src="../../assets/images/home/icon_my_s1.png">
                <span>我的足迹</span>
              </li>
            </router-link>
            <router-link to="/MyJoin">
              <li>
                <img slot="icon" src="../../assets/images/home/icon_my_s2.png">
                <span slot="label">我的参拍</span>
              </li>
            </router-link>
            <router-link to="/AddManage">
              <li>
                <img slot="icon" src="../../assets/images/home/icon_my_s8.png">
                <span slot="label">地址</span>
              </li>
            </router-link>
            <li @click="gotoOrder(null,demo)">
              <img slot="icon" src="../../assets/images/home/icon_my_s10.png">
              <span slot="label">我的秒杀</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="order">
        <div class="user-title">
          <h2 class="txt">卖家中心</h2>
          <a href="javascript:;" class="more"><i class="icon-right2"></i></a>
        </div>
        <div class="order-list">
          <ul>
            <li @click="myShop">
              <img slot="icon" src="../../assets/images/home/icon_my_s3.png">
              <span slot="label">我的店铺</span>
            </li>
            <router-link to="/SendSale">
              <li>
                <img slot="icon" src="../../assets/images/home/icon_my_s4.png">
                <span slot="label">拍品管理</span>
              </li>
            </router-link>
            <li @click="mySale">
              <img slot="icon" src="../../assets/images/home/icon_my_s11.png">
              <span slot="label">我售出的</span>
            </li>
            <router-link to="/ShopReport">
              <li>
                <img slot="icon" src="../../assets/images/home/icon_my_s12.png">
                <span slot="label">店铺报表</span>
              </li>
            </router-link>
            <router-link to="/Certification">
              <li>
                <img slot="icon" src="../../assets/images/home/icon_my_s6.png">
                <span slot="label">实名认证</span>
              </li>
            </router-link>
            <li @click="mySkill">
              <img slot="icon" src="../../assets/images/home/icon_miao.png">
              <span slot="label">秒杀申请</span>
            </li>
            <router-link to="/MyIncome">
              <li>
                <img slot="icon" src="../../assets/images/home/icon_income.png">
                <span slot="label">我的收入</span>
              </li>
            </router-link>
            <router-link to="/GroupNews">
              <li>
                <img slot="icon" src="../../assets/images/home/icon_group_news.png">
                <span slot="label">群发消息</span>
              </li>
            </router-link>
            <!--<router-link to="/ShopAdmin">
                            <li>
                                <img slot="icon" src="../assets/images/home/icon_group_news.png">
                                <span slot="label">店铺管理员</span>
                            </li>
                        </router-link>-->
          </ul>
        </div>
      </div>
      <div class="order">
        <div class="user-title">
          <h2 class="txt">第三方服务</h2>
          <a href="javascript:;" class="more"><i class="icon-right2"></i></a>
        </div>
        <div class="order-list">
          <ul>
            <a href="tel:0371-63633399">
              <li>
                <img slot="icon" src="../../assets/images/home/icon_my_s9.png">
                <span slot="label">官方客服</span>
              </li>
            </a>
            <router-link to="/Identify">
              <li>
                <img slot="icon" src="../../assets/images/home/icon_my_s7.png">
                <span slot="label">鉴宝服务</span>
              </li>
            </router-link>
            <router-link to="/chart">
              <li>
                <img slot="icon" src="../../assets/images/home/chart.png">
                <span slot="label">销售图表</span>
              </li>
            </router-link>
          </ul>
        </div>
      </div>
      <x-dialog :show.sync="imgShow" class="dialog-demo" hide-on-blur>
        <div class="img-box">
          <img :src="member_thumbs" style="max-width:100%">
        </div>
      </x-dialog>
      <confirm v-model="show4" :show-cancel-button="false" title="对不起您尚未认证店铺" @on-confirm="onConfirm">
        <p style="text-align:center;">请前往认证</p>
      </confirm>
      <loading :show="show1" :text="text"></loading>
      <toast v-model="success" type="text" width='2.4rem' is-show-mask>{{msg}}</toast>
    </view-box>
    <bottom></bottom>
  </div>
</template>

<script>
import bottom from '../comp/Footer';
import { getuserInfo } from '@/api/service'
import $ from 'jquery';
import {
  XHeader,
  Grid,
  GridItem,
  ViewBox,
  Confirm,
  XDialog,
  Loading,
  Toast
} from 'vux';

export default { //变量
  data() {
    return {
      bgsrc: require('../../assets/images/home/ubg.jpg'),
      userInfo: '{}',
      shopInfo: '',
      type: 2,
      imgShow: false,
      show4: false,
      show1: false,
      success: false,
      msg: '',
      activeIndex: '',
      member_thumb: '',
      member_thumbs: '',
      invite_img: '',
      urls: '',
      text: '加载中',
      demo: '全部',
      demo1: '待付款',
      demo2: '待发货',
      demo3: '已发货',
      demo4: '待评价'
    }
  },
  components: {
    bottom,
    XHeader,
    Grid,
    GridItem,
    ViewBox,
    Confirm,
    XDialog,
    Loading,
    Toast
  },
  beforeRouteEnter(to, from, next) {
    console.log(from);
    next(vm => {
      vm.urls = from.name;
    })
  },

  mounted() {
    this.getPersonInfo();
    this.getShopInfo()
  },
  methods: {
    //注销登录
    logout() {
      const that = this
      this.$vux.confirm.show({
        content: "是否要退出？",
        onConfirm () {
          that.$router.push({
            name: 'Login'
          })
        }
      })
      // this.$http({
      //   method: 'GET',
      //   url: '/los/api/member/logout.json',
      //   data: ''
      // }).then((result) => {
      //   if (result.data.code == 1) {
      //     location.href = '#/Login'
      //   }
      // }).catch((err) => {
      //   console.log(err);
      // })
    },
    onConfirm: function () {
      location.href = '#/Certification'
    },
    //获取个人资料
    getPersonInfo: function () {
      getuserInfo().then(result => {
        this.userInfo = result
      })
    },
    //获取店铺信息
    getShopInfo: function () {

    },
    myShop: function () {
      if (this.shopInfo == '') {
        this.show4 = !this.show4;
      } else if (this.shopInfo.shop_id > 0 && this.shopInfo.shop_state == 1) {
        location.href = '#/shop/id/' + this.shopInfo.shop_id
      }
    },
    mySkill: function () {
      if (this.shopInfo == '') {
        this.show4 = !this.show4;
      } else if (this.shopInfo.shop_id > 0 && this.shopInfo.shop_state == 1) {
        location.href = '#/Application'
      }
    },
    //我售出的
    mySale: function () {
      if (this.shopInfo == '') {
        this.show4 = !this.show4;
      } else if (this.shopInfo.shop_id > 0 && this.shopInfo.shop_state == 1) {
        location.href = '#/MySale';
      }
    },
    gotoOrder: function (index, demo) {
      console.log(demo);
      this.$router.push({
        name: 'AllOrder',
        query: {
          activeIndex: index,
          typeName: demo
        }
      });
    },
    gotoOrder2: function (index, demo) {
      console.log(demo);
      this.$router.push({
        name: 'shopingOrder',
      });
    },
    invite: function () {
      this.show1 = !this.show1;
      var params = {
        member_thumb: this.member_thumb
      }
      this.$http({
        method: 'POST',
        url: '/los/api/member/invite_qrcode.json',
        data: params
      }).then((result) => {
        this.show1 = false;
        if (result.data.code == 1) {
          this.imgShow = !this.imgShow;
          this.member_thumbs = result.data.data.invite_img;
          //						$('.img-box').find('img').attr('src', result.data.data.invite_img);
        }
      }).catch((err) => {
        console.log(err);
      })
    }
  }
}
</script>

<style scoped>
  #User {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
  }

  .header {
    background-color: transparent !important;
  }

  .top {
    width: 100%;
    height: 4.8rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .top .user {
    height: 1.97333rem;
    margin-top: 0.06666rem;
    margin-bottom: 0.53333rem;
    padding: 0 0.26666rem;
    overflow: hidden;
  }

  .top .user .headimg {
    position: relative;
    float: left;
    width: 1.97333rem;
    height: 1.97333rem;
  }

  .top .user .headimg img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: solid 1px rgba(255, 255, 255, 0.3);
  }

  .top .user .headimg .level {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0.02rem 0.05rem;
    color: #A30000;
    font-size: 0.32rem;
    background-color: #fff;
    border-radius: 0.05333rem;
  }

  .top .user .info {
    float: left;
    margin-left: 0.50666rem;
    color: #fff;
  }

  .top .user .info .name {
    margin-top: 0.13333rem;
    font-size: 0.42666rem;
    width: 5.3rem;
    overflow: hidden;
    height: 0.57rem
  }

  .top .user .info ul {
    margin-top: 0.4rem;
    overflow: hidden;
  }

  .top .user .info ul li {
    float: left;
    padding: 0 0.26rem;
    text-align: center;
  }

  .top .user .info ul li p {
    line-height: 1;
    color: #fff;
  }

  .top .user .info ul li:first-child {
    position: relative;
    padding-left: 0;
  }

  .top .user .info ul li:first-child:after {
    content: '';
    position: absolute;
    top: 0.15rem;
    right: -1px;
    width: 1px;
    height: 0.4rem;
    background-color: #aaa;
    display: block;
  }

  .top .user .info ul li:last-child {
    padding-right: 0;
  }

  .top .user .info ul li .txt {
    margin-top: 0.13333rem;
    font-size: 0.32rem;
    color: #fff;
  }

  .top .user .edit {
    float: right;
    margin-top: 0.73333rem;
    width: 1.6rem;
    height: 0.61333rem;
    line-height: 0.66666rem;
    text-align: center;
    color: #fff;
    font-size: 0.29333rem;
  }

  .top .user .edit.vux-1px:before {
    border-color: #fff;
    border-radius: 4px;
  }

  .top .signature {
    position: relative;
    width: 100%;
    color: #fff;
    opacity: 0.7;
    padding: 0 0.26666rem;
  }

  .top .signature:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 1px;
    border-top: solid 1px rgba(255, 255, 255, 0.15);
    transform-origin: 0 0;
    transform: scaleX(0.5);
  }

  .top .signature p {
    font-size: 0.32rem;
    padding: 0.34666rem 0;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  /*统一标题*/

  .user-title {
    position: relative;
    padding: 0 0.26666rem;
    height: 1.30666rem;
    line-height: 1.30666rem;
    overflow: hidden;
  }

  .user-title:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200%;
    height: 1px;
    border-bottom: 1px solid #f3f3f3;
    transform-origin: 0 0;
    transform: scaleX(0.5);
  }

  .user-title .txt {
    float: left;
    font-size: 0.37333rem;
    display: inline-block;
  }

  .user-title .more {
    float: right;
    font-size: 0.29333rem;
    color: #aaa;
  }

  .user-title .more i {
    float: right;
    margin: 0.45333rem 0;
    margin-left: 0.16rem;
  }

  /*订单信息*/

  .order {
    margin-bottom: 0.26666rem;
    background-color: #fff;
  }

  .order-list ul {
    overflow: hidden;
  }

  .order-list ul li {
    float: left;
    width: 25%;
    text-align: center;
    padding: 0.49rem 0.34rem;
  }

  .order-list ul li img {
    width: 0.8rem;
    height: 0.8rem;
    display: block;
    text-align: center;
    margin-left: 0.5rem;
  }

  .order-list ul li span {
    display: block;
    margin-top: 0.26rem;
    font-size: 0.32rem;
  }

  .order-list .weui-grid {
    padding: 0.37333rem 0.13333rem;
  }

  .order-list .weui-grid:active {
    background-color: transparent;
  }

  .order-list .weui-grids:before,
  .order-list .weui-grids:after,
  .order-list .weui-grid:before,
  .order-list .weui-grid:after {
    border: none;
  }

  .order-list .weui-grid span {
    font-size: 0.32rem !important;
  }
</style>
<style>
  .order-list .weui-grid__icon + .weui-grid__label {
    margin-top: 0.26666rem;
  }
</style>
